<template>
  <div>
    <!-- 后台管理紧急开发中...... -->
    <div class="manage">
      <flow-list />
      <div class="manage_box">
        <menu-list
          class="max-w-[180px] bg-[white] transition-all duration-500"
          :style="{ width: isCollapse ? '54px' : '178px' }"
        />

        <div
          class="min-icon"
          :style="{
            left: isCollapse ? '38px' : '158px',
          }"
        >
          <el-icon
            class="w-full h-full"
            v-if="!isCollapse"
            @click="handleClickIcon(true)"
            ><ArrowLeft
          /></el-icon>
          <el-icon class="w-full h-full" v-else @click="handleClickIcon(false)"
            ><ArrowRight
          /></el-icon>
        </div>

        <!-- 三级出口 -->
        <el-scrollbar
          class="main-container"
          :style="{
            width: isCollapse ? 'calc(100vw - 3rem)' : 'calc(100vw - 8.8rem)',
            transition: 'all 0.3s ease-in-out',
          }"
        >
          <router-view />
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import MenuList from "./MenuList/index.vue";
import FlowList from "./FlowList/index.vue";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";
import { ConnectToSSE, StopSSE } from "../../../wailsjs/go/api/CustomerApi.js";

onMounted(() => {
  startSSE();
  watchErr();
});

const useStore = useUserStore();
const { isCollapse, cutStatus, flowActiveIndex, checkDetailForm } =
  storeToRefs(useStore);

const handleClickIcon = (type) => {
  useStore.updateIsCollapse(type);
};

const startSSE = async () => {
  await ConnectToSSE();
  window.runtime.EventsOn("sse_event", (data) => {
    // if (!data) return;
    if (typeof data == "string" && data.indexOf("code") == -1) return;
    // console.log("收到SSE事件1:", data);
    let form = JSON.parse(data || "{}");
    if (form?.dataType == "addList") {
      // // 监听机器新增检查单，刷新列表
      setStorageWithEvent("refresh_checkList");
    }
    if (true) {
      // 监听数据更新，刷新列表
      if (
        checkDetailForm.value.id &&
        checkDetailForm.value.id == form.data.listId &&
        cutStatus.value == 2 &&
        flowActiveIndex.value == 2
      ) {
        setStorageWithEvent("refresh_data");
      }
    }
  });
};

const watchErr = () => {
  window.runtime.EventsOn("reconnect_event", (data) => {
    console.log(111);
    startSSE();
  });
};

const stopSSE = async () => {
  const res = await StopSSE();
};

onBeforeUnmount(() => {
  stopSSE();
  window.runtime.EventsOff("reconnect_event");
});
</script>

<style scoped lang="scss">
.manage {
  .manage_box {
    background-color: #f1f0f0;
    @apply w-full flex relative;
    .main-container {
      height: calc(100vh - 7rem);
      @apply px-0 mt-1 ml-1 box-border;
      transition: all 0.3s ease-in-out;
    }
  }
}

.min-icon {
  transition: all 0.35s ease-in-out;
  @apply w-[1.4rem] h-[1.4rem] absolute  top-[45%] z-[9999] bg-[#ccc] text-[white] flex justify-center items-center rounded-[50%];
  &:hover {
    @apply cursor-pointer  bg-[var(--theme-color)];
  }
}
</style>